.page-container {
	display: flex;
	align-items: center;
	flex-direction: column;

	.title {
		font-size: 36rpx;
		font-weight: 500;
		color: #333333;
		margin-top: 60rpx;
	}

	.description {
		font-size: 28rpx;
		color: #999999;
		margin-top: 8rpx;
	}

	.id-card-image-container {
		margin-top: 68rpx;
		width: 100vw;
		padding: 0 56rpx;
		box-sizing: border-box;

		.id-card-container {
			height: 440rpx;

			&:not(:last-child) {
				margin-bottom: 44rpx;
			}
		}

		.id-card-image {
			border-radius: 20rpx;
			overflow: hidden;

			.image {
				width: 100%;
				height: 100%;
			}
		}

		.id-card-placeholder {
			background-size: 100% 100%;
			position: relative;

			.center-container {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				display: flex;
				align-items: center;
				flex-direction: column;

				.plus-icon {
					width: 120rpx;
					height: 120rpx;
					background: #3b70e4;
					box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 58, 184, 0.3);
					border-radius: 50%;
					position: relative;

					.icon {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						width: 60rpx;
						height: 60rpx;
					}
				}

				.btn-text {
					font-size: 32rpx;
					color: #333333;
					margin-top: 26rpx;
				}
			}

			&.portraitFace {
				background-image: url("https://xwx.gzzmedu.com/pic/informationVerification/idCardPortraitFace.png");
			}

			&.nationalEmblemFace {
				background-image: url("https://xwx.gzzmedu.com/pic/informationVerification/idCardNationalEmblemFace.png");
			}
		}
	}

	.next-step-btn {
		margin: 60rpx 0;
		background-color: #3b70e4;
		padding: 0 172rpx;
		height: 84rpx;
		line-height: 84rpx;
		color: white;
		border-radius: 42rpx;
	}
}
